<template>
  <div style="margin-top: 16px">
    <el-form-item label="分配类型">
      <el-radio-group v-model="userTaskForm.type" @change="typechange">
        <el-tooltip
          class="item"
          effect="dark"
          content="流程设计器指定"
          placement="right-start"
        >
          <el-radio label="0">静态分配</el-radio>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="程序动态指定"
          placement="right-start"
        >
          <el-radio label="1">动态分配人员</el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="处理用户"  v-show="userTaskForm.type == '0'">
      <el-input  :disabled="true"
        v-model="userTaskForm.assigneeName"
        clearable
        @change="setAssignment()"
      />
      <el-button
        @click="selectAssignee()"
        type="primary"
        style="margin-top: 8px"
      >
        选择
      </el-button>
      <el-button
        @click="clearAssignee('assignee')"
        type="primary"
        style="margin-top: 8px"
      >
        清空
      </el-button>
    </el-form-item>
    <el-form-item label="候选用户" v-show="userTaskForm.type == '0'">
      <el-input :disabled="true"
        type="textarea"
        v-model="userTaskForm.candidateUsersName"
        clearable
        @change="setCandidateUsers()"
      />
      <el-button
        @click="selectCandidateUsers()"
        type="primary"
        style="margin-top: 8px"
      >
        选择
      </el-button>
      <el-button
        @click="clearAssignee('candidateUsers')"
        type="primary"
        style="margin-top: 8px"
      >
        清空
      </el-button>
    </el-form-item>
    <el-form-item label="候选分组" v-show="userTaskForm.type == '0'">
      <el-input
      :disabled="true"
        type="textarea"
        v-model="userTaskForm.candidateGroupsName"
        clearable
        @change="setCandidateGroups()"
      />
      <el-button
        @click="selectCandidateGroups()"
        type="primary"
        style="margin-top: 8px"
      >
        选择
      </el-button>
      <el-button
        @click="clearAssignee('candidateGroups')"
        type="primary"
        style="margin-top: 8px"
      >
        清空
      </el-button>
    </el-form-item>

    <el-form-item label="指定类型" v-show="userTaskForm.type == '1'">
      <el-select
        v-model="userTaskForm.assign_mode"
        placeholder="请选择指定类型"
        @change="selectAssignMode()"
      >
        <el-option label="所有人员中选择（根据组织选择）" value="0"></el-option>
        <!-- <el-option label="组织选择（指定组织父节点）" value="1"></el-option>
        <el-option label="用户组选择（选择指定组内成员）" value="2"></el-option>
        <el-option label="发起人本组织选择" value="3"></el-option> -->
       <!-- <el-option label="部门经理" value="4"></el-option>
        <el-option label="上级领导" value="5"></el-option>
        <el-option label="分管领导" value="6"></el-option> -->
        <el-option label="流程发起人" value="7" />
        <!-- <el-option label="指定范围选择" value="8"></el-option> -->
        <!-- <el-option label="代理人（选择单用户）" value="9" />
        <el-option label=" 候选人（选择多用户）" value="10" />
        <el-option label="候选组（选择多组织）" value="11" /> -->
      </el-select>
    </el-form-item>
    <el-form-item
      label="用户组选择"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '2'"
    >
      <el-select
        v-model="userTaskForm.assign_content"
        placeholder="请选择用户组"
        @change="selectAssignMode()"
      >
        <el-option
          v-for="item in groupList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="选择组织信息"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '1'"
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.organize_name"
        clearable
        disabled
      />
      <el-button
        @click="selectOneOrganize()"
        type="primary"
        style="margin-top: 8px"
      >
        选择
      </el-button>
    </el-form-item>
    <el-form-item
      label="选择用户信息"
      v-show="
        userTaskForm.type == '1' &&
          (userTaskForm.assign_mode == '8' || userTaskForm.assign_mode == '10')
      "
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.user_names"
        clearable
        disabled
      />
      <el-button
        @click="selectMoreUser()"
        type="primary"
        style="margin-top: 8px"
      >
        选择
      </el-button>
    </el-form-item>
    <el-form-item
      label="选择用户信息"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '9'"
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.user_name"
        clearable
        disabled
      />
      <el-button
        @click="selectOneUser()"
        type="primary"
        style="margin-top: 8px"
      >
        选择
      </el-button>
    </el-form-item>
    <el-form-item
      label="选择组织信息"
      v-show="userTaskForm.type == '1' && userTaskForm.assign_mode == '11'"
    >
      <el-input
        type="textarea"
        v-model="userTaskForm.organize_names"
        clearable
        disabled
      />
      <el-button
        @click="selectMoreOrganize()"
        type="primary"
        style="margin-top: 8px"
      >
        选择
      </el-button>
    </el-form-item>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-table :data="tableData" @row-click="cellclick" style="width: 100%">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="user_name" label="姓名" width="180" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import SelectOneUser from '@/views/system/User/SelectOneUser'
import SelectMoreUser from '@/views/system/User/SelectMoreUser'
import SelectOneOrganize from '@/views/system/Organize/SelectOneOrganize'
import SelectMoreOrganize from '@/views/system/Organize/SelectMoreOrganize'
import {
  findUserOrOrganizeNames,
  findAssignment,
  saveAssignment,
  findGroupList,
} from '@/api/activiti/modeler'
export default {
  name: 'UserTask',
  props: {
    id: String,
    type: String,
  },
  data () {
    return {
      defaultTaskForm: {
        type: '0',
        assign_mode: '',
        assignee: '',
        candidateUsers: [],
        candidateGroups: [],
        dueDate: '',
        followUpDate: '',
        priority: '',
        propertyForm: [],
      },
      checktype: '',
      dialogVisible: false,
      tableData: [],
      groupList: [],
      userTaskForm: {
        type: '0',
      },
      mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    }
  },
  watch: {
    id: {
      immediate: true,
      handler () {
        this.bpmnElement = window.bpmnInstances.bpmnElement
        this.bpmnInstances = window.bpmnInstances
        this.$nextTick(() => this.resetTaskForm())
      },
    },
  },
  mounted () {
    this.initGroup()
  },
  methods: {

    typechange (e) {
     if (e === '1') {
      this.clearAssignee('assignee')
      this.clearAssignee('candidateGroups')
      this.clearAssignee('candidateUsers')
      this.userTaskForm.assign_content='';
     } else {
        this.userTaskForm.assign_mode = '';
     }
    },
    resetTaskForm () {
      this.$set(this.userTaskForm, 'model_id', this.bpmnElement.parent.id)
      this.$set(this.userTaskForm, 'node_key', this.bpmnElement?.id)
      for (const key in this.defaultTaskForm) {
        // console.log("key",key)
        let value
        if (key === 'candidateUsers' || key === 'candidateGroups') {
          value = this.bpmnElement?.businessObject[key]
            ? this.bpmnElement.businessObject[key].split(',')
            : []
          if (value != '') {
            findUserOrOrganizeNames({ type: key, ids: value.join(',') }).then(
              (response) => {
                if (key === 'candidateUsers') {
                  this.$set(
                    this.userTaskForm,
                    'candidateUsers',
                    response.data.data.myIds,
                  )
                  this.$set(
                    this.userTaskForm,
                    'candidateUsersName',
                    response.data.data.myNames,
                  )
                } else if (key === 'candidateGroups') {
                  this.$set(
                    this.userTaskForm,
                    'candidateGroups',
                    response.data.data.myIds,
                  )
                  this.$set(
                    this.userTaskForm,
                    'candidateGroupsName',
                    response.data.data.myNames,
                  )
                }
              },
            )
          } else {
            if (key === 'candidateUsers') {
              this.$set(this.userTaskForm, 'candidateUsers', '')
              this.$set(this.userTaskForm, 'candidateUsersName', '')
            } else if (key === 'candidateGroups') {
              this.$set(this.userTaskForm, 'candidateGroups', '')
              this.$set(this.userTaskForm, 'candidateGroupsName', '')
            }
          }
        } else if (key === 'assignee') {
          value =
            this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key]
          if (value != '') {
            findUserOrOrganizeNames({ type: key, ids: value }).then(
              (response) => {
                this.$set(
                  this.userTaskForm,
                  'assignee',
                  response.data.data.myIds,
                )
                this.$set(
                  this.userTaskForm,
                  'assigneeName',
                  response.data.data.myNames,
                )
              },
            )
          } else {
            this.$set(this.userTaskForm, 'assignee', '')
            this.$set(this.userTaskForm, 'assigneeName', '')
          }
        } else {
          value =
            this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key]
          this.$set(this.userTaskForm, key, value)
        }
        // console.log(key + "|" + value);
      }
      // 查询节点设置信息
      findAssignment({
        model_id: this.userTaskForm.model_id,
        node_key: this.userTaskForm.node_key,
      }).then((response) => {
        this.$set(this.userTaskForm, 'node_id', response.data.data.id)
        this.$set(
          this.userTaskForm,
          'assign_mode',
          response.data.data.assign_mode,
        )
        this.$set(
          this.userTaskForm,
          'assign_content',
          response.data.data.assign_content,
        )
        this.$set(this.userTaskForm, 'type', response.data.data.type)
        this.$set(this.userTaskForm, 'node_id', response.data.data.id)
        if (response.data.data.assign_mode == '1') {
          this.$set(
            this.userTaskForm,
            'organize_id',
            response.data.data.organize_id,
          )
          this.$set(
            this.userTaskForm,
            'organize_name',
            response.data.data.organize_name,
          )
        } else if (
          response.data.data.assign_mode == '8' ||
          response.data.data.assign_mode == '10'
        ) {
          this.$set(this.userTaskForm, 'user_ids', response.data.data.user_ids)
          this.$set(
            this.userTaskForm,
            'user_names',
            response.data.data.user_names,
          )
        } else if (response.data.data.assign_mode == '9') {
          this.$set(this.userTaskForm, 'user_id', response.data.data.user_id)
          this.$set(
            this.userTaskForm,
            'user_name',
            response.data.data.user_name,
          )
        } else if (response.data.data.assign_mode == '11') {
          this.$set(
            this.userTaskForm,
            'organize_ids',
            response.data.data.organize_ids,
          )
          this.$set(
            this.userTaskForm,
            'organize_names',
            response.data.data.organize_names,
          )
        }
      })
    },
    async updateElementTask (key) {
      await axios
        .get('http://127.0.0.1:8090/getOrgUser?pageSize=10&pageNum=1')
        .then((res) => {
          this.tableData = res.data
          console.log('设置完')
        })
      this.checktype = key
      this.dialogVisible = true
      const taskAttr = Object.create(null)
      if (key === 'candidateUsers' || key === 'candidateGroups') {
        taskAttr[key] =
          this.userTaskForm[key] && this.userTaskForm[key].length
            ? this.userTaskForm[key].join()
            : null
      } else {
        taskAttr[key] = this.userTaskForm[key] || null
        console.log(taskAttr[key])
      }
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr,
      )
    },
    cellclick (row) {
      var key = this.checktype
      const taskAttr = Object.create(null)
      this.userTaskForm.assignee = row.id
      this.dialogVisible = false
      if (key === 'candidateUsers' || key === 'candidateGroups') {
        taskAttr[key] =
          this.userTaskForm[key] && this.userTaskForm[key].length
            ? this.userTaskForm[key].join()
            : null
      } else {
        taskAttr[key] = this.userTaskForm[key] || null
        console.log(taskAttr[key])
      }
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr,
      )
    },

    // 清空
    clearAssignee (key) {
      let value
      const taskAttr = Object.create(null)
      if (key === 'candidateUsers' || key === 'candidateGroups') {
        console.log(key)
         taskAttr[key] = ''
        if (key === 'candidateUsers') {
          this.$set(this.userTaskForm, 'candidateUsersName', '')
        } else {
           this.$set(this.userTaskForm, 'candidateGroupsName', '')
        }
      } else {
        taskAttr[key] = '' // this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];

        this.$set(this.userTaskForm, 'assigneeName', '')
      }
      this.$set(this.userTaskForm, key, '')
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr,
      )
    },

    // 初始化initGroup
    initGroup () {
      findGroupList({}).then((response) => {
        this.groupList = response.data.data
       // console.log("groupList",this.groupList)
      })
    },

    // 选择办理人
    selectAssignee () {
      this.dialog(SelectOneUser, 'assignee', {
        user_id: this.userTaskForm.assignee,
        user_name: this.userTaskForm.assigneeName,
      })
    },
    // 选择候选人
    selectCandidateUsers () {
      this.dialog(SelectMoreUser, 'candidateUsers', {
        user_ids: this.userTaskForm.candidateUsers,
        user_names: this.userTaskForm.candidateUsersName,
      })
    },
    // 选择候选组
    selectCandidateGroups () {
      this.dialog(SelectMoreOrganize, 'candidateGroups', {
        organize_ids: this.userTaskForm.candidateGroups,
        organize_names: this.userTaskForm.candidateGroupsName,
      })
    },

    // 选择单组织
    selectOneOrganize () {
      this.dialog(SelectOneOrganize, 'oneOrganize', {
        organize_id: this.userTaskForm.organize_id,
        organize_name: this.userTaskForm.organize_name,
      })
    },
    // 选择多用户
    selectMoreUser () {
      this.dialog(SelectMoreUser, 'moreUser', {
        user_ids: this.userTaskForm.user_ids,
        user_names: this.userTaskForm.user_names,
      })
    },
    // 选择单用户
    selectOneUser () {
      this.dialog(SelectOneUser, 'oneUser', {
        user_id: this.userTaskForm.user_id,
        user_name: this.userTaskForm.user_name,
      })
    },
    // 选择多组织
    selectMoreOrganize () {
      this.dialog(SelectMoreOrganize, 'moreOrganize', {
        organize_ids: this.userTaskForm.organize_ids,
        organize_names: this.userTaskForm.organize_names,
      })
    },

    setAssignment () {
      // 更新文档参数
      this.updateActivitiProperties('assignee', this.userTaskForm.assigneeName)
    },

    setCandidateUsers () {
      // 更新文档参数
      this.updateActivitiProperties(
        'candidateUsers',
        this.userTaskForm.candidateUsersName,
      )
    },

    setCandidateGroups () {
      // 更新文档参数
      this.updateActivitiProperties(
        'candidateGroups',
        this.userTaskForm.candidateGroupsName,
      )
    },

    // 选择用户组织弹框
    dialog (component, fileType, record) {
      console.log(component, fileType, record)
      const that = this
      this.$dialog(
        component,
        // component props
        {
          record,
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            },
            initValue (value, type) {
              if (type == '1') {
                if (fileType == 'assignee') {
                  that.userTaskForm.assignee = value.split(':')[0]
                  that.userTaskForm.assigneeName = value.split(':')[1]
                  // 更新文档参数
                  that.updateActivitiProperties(
                    'assignee',
                    value.split(':')[0],
                  )
                  that.saveAssignMode(
                    value.split(':')[0] + '#' + value.split(':')[1],
                  )
                } else if (fileType == 'oneUser') {
                  that.userTaskForm.user_id = value.split(':')[0]
                  that.userTaskForm.user_name = value.split(':')[1]
                  that.saveAssignMode(
                    value.split(':')[0] + '#' + value.split(':')[1],
                  )
                }
              } else if (type == '2') {
                if (fileType == 'candidateUsers') {
                  that.userTaskForm.candidateUsers = value.split(':')[0]
                  that.userTaskForm.candidateUsersName = value.split(':')[1]
                  // 更新文档参数
                  that.updateActivitiProperties(
                    'candidateUsers',
                    value.split(':')[0],
                  )
                  that.saveAssignMode(
                    value.split(':')[0] + '#' + value.split(':')[1],
                  )
                } else if (fileType == 'moreUser') {
                  that.userTaskForm.user_ids = value.split(':')[0]
                  that.userTaskForm.user_names = value.split(':')[1]
                  that.saveAssignMode(
                    value.split(':')[0] + '#' + value.split(':')[1],
                  )
                }
              } else if (type == '3') {
                if (fileType == 'oneOrganize') {
                  that.userTaskForm.organize_id = value.split(':')[0]
                  that.userTaskForm.organize_name = value.split(':')[1]
                  that.saveAssignMode(
                    value.split(':')[0] + '#' + value.split(':')[1],
                  )
                }
              } else if (type == '4') {
                if (fileType == 'candidateGroups') {
                  that.userTaskForm.candidateGroups = value.split(':')[0]
                  that.userTaskForm.candidateGroupsName = value.split(':')[1]
                  // 更新文档参数
                  that.updateActivitiProperties(
                    'candidateGroups',
                    value.split(':')[0],
                  )
                  that.saveAssignMode(
                    value.split(':')[0] + '#' + value.split(':')[1],
                  )
                } else if (fileType == 'moreOrganize') {
                  that.userTaskForm.organize_ids = value.split(':')[0]
                  that.userTaskForm.organize_names = value.split(':')[1]
                  that.saveAssignMode(
                    value.split(':')[0] + '#' + value.split(':')[1],
                  )
                }
              }
              that.$forceUpdate()
            },
          },
        },
        // modal props
        {
          title: '操作',
          width: 800,
          height: 500,
          centered: true,
          maskClosable: false,
          okText: '确认',
          cancelText: '取消',
        },
      )
    },
    updateActivitiProperties (key, value) {
      const taskAttr = {}
      taskAttr[key] = value
      window.bpmnInstances.modeling.updateProperties(
        this.bpmnElement,
        taskAttr,
      )
    },
    selectAssignMode () {
      const assign_mode = this.userTaskForm.assign_mode
      const assign_content = this.userTaskForm.assign_content
      if (
        assign_mode == '0' ||
        assign_mode == '3' ||
        (assign_mode == '2' &&
          assign_content != '' &&
          assign_content != undefined)
      ) {
        saveAssignment({
          id: this.userTaskForm.node_id,
          type: this.userTaskForm.type,
          assign_mode: this.userTaskForm.assign_mode,
          assign_content: this.userTaskForm.assign_content,
          model_id: this.userTaskForm.model_id,
          node_key: this.userTaskForm.node_key,
        }).then((response) => {
          console.log(response)
        })
      } else if (
        assign_mode == '4' ||
        assign_mode == '5' ||
        assign_mode == '6' ||
        assign_mode == '7'
      ) {
        saveAssignment({
          id: this.userTaskForm.node_id,
          type: this.userTaskForm.type,
          assign_mode: this.userTaskForm.assign_mode,
          assign_content: '',
          model_id: this.userTaskForm.model_id,
          node_key: this.userTaskForm.node_key,
        }).then((response) => {
          console.log(response)
        })
      }
    },
    saveAssignMode (assign_content) {
      saveAssignment({
        id: this.userTaskForm.node_id,
        type: this.userTaskForm.type,
        assign_mode: this.userTaskForm.assign_mode,
        model_id: this.userTaskForm.model_id,
        node_key: this.userTaskForm.node_key,
        assign_content: assign_content,
      }).then((response) => {
        console.log(response)
      })
    },
  },

  beforeDestroy () {
    this.bpmnElement = null
  },
}
</script>
